<template>
  <div class="searchContainer">
    <div class="header">
      <div @touchstart = "handleBack">
        <svg
          t="1641202236618"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4755"
          width="32"
          height="32"
      
        >
          <path
            d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z"
            p-id="4756"
            fill="#cdcdcd"
          ></path>
        </svg>
      </div>
      <input type="text" placeholder="搜索商品名称" v-model="search" />
      <div @touchstart="handleSearch">
        <svg
          t="1641201528184"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3767"
          width="32"
          height="32"
        >
          <path
            d="M934.242232 884.637975 738.287281 695.561689l1.836835-2.302439c52.767807-65.338101 81.829703-147.602709 81.829703-231.593636 0-203.716728-165.742858-369.473913-369.411491-369.473913-203.731054 0-369.505635 165.757185-369.505635 369.473913 0 203.715705 165.774581 369.45754 369.505635 369.45754 89.26607 0 175.511339-32.450063 242.841817-91.288123l2.209318-1.929955 195.485253 186.963159 1.959631 0 0.031722 1.61887c4.947685 3.483334 10.517541 5.319146 16.5837 5.319146 16.180518 0 29.308513-13.192464 29.308513-29.310559C940.96126 896.276037 938.72329 890.239554 934.242232 884.637975zM452.541305 772.413008c-171.358763 0-310.74637-139.388631-310.74637-310.74637 0-171.34239 139.387607-310.700321 310.74637-310.700321 171.309644 0 310.700321 139.357931 310.700321 310.700321C763.241626 633.024377 623.851972 772.413008 452.541305 772.413008z"
            p-id="3768"
            fill="#bfbfbf"
          ></path>
        </svg>
      </div>
    </div>
    <div class="bottom" v-if="!search">
      <h2 class="bottomSearch">搜索发现</h2>
      <div class="descList">
        <div
          class="descItem"
          v-for="(item, index) in searchList"
          :key="item.id"
        >
          {{ item.desc }}
        </div>
      </div>
    </div>
    <div class="searchResult" v-else>
      <ul>
        <li v-for="(item,index) in searchResult" :key="index">{{item.title}}</li>
        
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Search",
  data() {
    return {
      search: "",
    };
  },
  created() {
    this.$store.dispatch("getSearchList");
  },
  computed: {
    ...mapState({
      searchList: (state) => state.search.searchList,
      searchResult: (state) => state.search.searchResult,
    }),
  },
  methods: {
    handleSearch() {
      this.$store.dispatch("getSearchResult");
    },
    handleBack(){
      this.$router.back()
    }
  },
};
</script>

<style scoped lang="less">
.searchContainer {
  .header {
    display: flex;
    width: 100%;
    height: 0.38rem;
    background-color: #f2f2f2;
    justify-content: space-between;
    text-align: center;
    padding: 0.07rem 0;
    box-sizing: border-box;
    svg {
      width: 0.25rem;
      height: 0.25rem;
      line-height: 0.36rem;
      margin: 0 0.11rem;
    }
    input {
      padding-left: 0.05rem;
      border: none;
      outline: none;
      font-size: 0.15rem;
      height: 0.25rem;
      width: 92%;
    }
  }
  .bottom {
    margin: 0.3rem;
    .bottomSearch {
      font-weight: 700;
    }
    .descList {
      margin-top: 0.25rem;
      display: flex;
      flex-wrap: wrap;
      .descItem {
        width: 1.4rem;
        height: 0.14rem;
        padding-left: 0.1rem;
        font-size: 0.13rem;
        margin-bottom: 0.25rem;
      }
    }
  }
  .searchResult{
    padding: 0 .15rem;
    li{
      width: 2.9rem;
      height: .5rem;
      font-size: .16rem;
      line-height: .5rem;
      border-bottom: 0.01rem solid #d9d9d9;
    }
  }
}
</style>